<template>
  <div class="cart">
    <!-- 空状态提示 -->
    <!-- <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="您的购物车为空"
      v-if="$store.state.cart.list.length===0"
    /> -->

    <!-- 提交订单栏 -->
    <!-- <van-submit-bar :price="totalMoney" @submit="jumpToPays" button-text="提交订单">
      <van-checkbox :value="allChecked" @click="checkedAll({checked: !allChecked})">全选</van-checkbox>
    </van-submit-bar> -->
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapGetters('cart', ['allChecked', 'totalMoney']),
    // allChecked() {
    //   return this.$store.getters['cart/allChecked']
    // },
    // totalMoney() {
    //   return this.$store.getters['cart/totalMoney']
    // },
    /**
     * 购物车数组，是对store中store.state.cart.list的引用
    */
    cart () {
      return this.$store.state.cart.list
    }
  },
  created () {
    console.log('购物车：', this.$store)
  },
  methods: {
    ...mapMutations('cart', ['modifyChecked', 'checkedAll']), // 将store.commit( 'cart/ modifyChecked')映射到 methons 方法中

    // 处理删除购物车商品
    handleRemove (id) {
      this.$store.commit('cart/removeFromCart', { id })
    },
    // 处理修改购物车商品数量
    handleChangeAmount (amount, id) {
      this.$store.commit('cart/modifyAmount', { id, amount })
    },
    // 处理商品行前复选框选中状态
    handleModifyChecked (id) {
      this.modifyChecked({ id })
    },
    // 全选复选框点击事件
    // handleCheckAll() {
    //   this.checkedAll({ checked: !this.allChecked })
    // },
    jumpToPays () {
      this.$router.push('/pay/')
    }
  }
}
</script>

<style lang="less" scoped>
  .cart {
    padding-bottom: 168px;
  }
  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }

  /deep/ .van-card__thumb {
    display: flex;
    width: 120px;
  }
  /deep/ .van-checkbox {
    margin-right: 6px;
  }
</style>
